<template>
  <div class="advantage">
    <div class="register" @click="goRegister"></div>
    <swiper :options="swiperOption" ref="slider">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </swiper-slide>
    </swiper>
    <div class="pagination">
        <div class="pointer" 
          :class="{active:index==swiperIndex}" 
          :index="index" v-for="(item,index) in swiperList" 
          :key="item.id"
          @click="clickPointer(index)"
          ></div>
        </div>
    </div>
</template>
<script>
export default {
  name: "advantage",
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: 4000,
        onSlideChangeEnd: swiper => {
          this.swiperIndex = swiper.realIndex;
        }
      },
      swiperIndex: 0,
      swiperList: [
        {
          id: "01",
          imgUrl: "./../../static/image/advantage/content@3x.png"
        },
        {
          id: "02",
          imgUrl: "./../../static/image/advantage/copy@3x.png"
        },
        {
          id: "03",
          imgUrl: "./../../static/image/advantage/text@3x.png"
        }
      ]
    };
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(2, 1000, false);
  },
  methods: {
    goRegister() {
      window.open("http://www.lertui.com/ad/register.html");
    },
    clickPointer(i) {
      this.$refs.slider.swiper.slideTo(i + 1, 1000, false);
      this.swiperIndex = i;
    }
  }
};
</script>

<style lang="scss" scoped>
.advantage {
  width: 800px;
  height: 420px;
  margin: 0 auto;
  position: relative;
  // background: fuchsia;
  #swiper-pagination {
    position: relative;
  }
  img {
    width: 90%;
  }
  .register {
    width: 180px;
    height: 45px;
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 328px;
    transform: translateX(-52%);
    cursor: pointer;
  }
  .pagination {
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: absolute;
    left: 0;
    bottom: -15px;
    text-align: center;
    .pointer {
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 4px;
      display: inline-block;
      margin-right: 10px;
      background: #dcdcdc;
      cursor: pointer;
    }
    .active {
      width: 16px;
      height: 8px;
      background: #fe5411 !important;
    }
  }
}
</style>
